<template>
	<div class="login-container">
		<!-- 导航栏 -->
		<van-nav-bar class="nav-bar" title="登录" left-arrow @click-left="$router.back('/login')" />
		<div class="container">
			<van-form @submit="submit" :validate-first="true">
				<van-field center
					:rules="[{ required: true, message: '请填写手机号' },{pattern:/^1[3-9]\d{9}$/,message: '请填写正确的手机号'}]"
					placeholder="请输入手机号" name="mobile" v-model="username">
					<template #left-icon>
						<span class="iconfont icon-shouji2"></span>
					</template>
				</van-field>

				<van-field :rules="[{ required: true, message: '请填写密码' },{pattern:/^\w{6,12}$/,message: '密码格式错误'}]"
					center placeholder="请输入密码" name="password" type="password" v-model="password">
					<template #left-icon>
						<span class="iconfont icon-icon-mima"></span>
					</template>
				</van-field>

				<router-link style="text-align: right; color: #bbbcbd;" tag="p" to="/reg">
					<span>还没有账号？点击注册</span>
				</router-link>
				<div style="margin: 30px 30px;">
					<van-button round block type="primary" size="normal" :square="true" native-type="submit">登录
					</van-button>

				</div>

			</van-form>

		</div>

		<!-- /登录表单 -->
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {

		data() {

			let username = localStorage.getItem('mobile')
			return {
				username,
				password: '',
			}
		},
		computed: {
			...mapState(['uid'])
		},
		methods: {
			...mapMutations(['SET_DATA']),
			...mapActions(['login']),

			submit() {
				let {
					username,
					password
				} = this;
				console.log(username)
				console.log(password)
				//数据校验 
				if (!/^1[3-9]\d{9}$/.test(username)) {
					this.$toast.fail('手机号码格式错误')
					return
				}
				if (!/^\w{6,12}$/.test(password)) {
					this.$toast.fail('密码格式错误')
					return
				}

				//   如果代码走到这  证明  数据没毛病  


				// 	this.$store.dispatch('login',{
				// 		username,
				// 		password
				// 	})




				this.login({
					username,
					password
				}).then(res => {
					console.log(res)

					if (res.code == 0) {

						this.$toast(res.msg)

						let {
							uid,
							token,
							username,
							userInfo,
							tokenExpired
						} = res;

						localStorage.setItem('uid', uid)
						localStorage.setItem('token', token)
						localStorage.setItem('username', username);
						localStorage.setItem('tokenExpired', tokenExpired); //token过期时间 时间戳
						// localStorage.setItem('userInfo',JSON.stringify(userInfo));
						// localStorage  可以持久存储  刷新以后数据也有  不是响应式 性能有损


						this.SET_DATA({
							key: "TOKEN",
							value: token
						})

						this.$store.commit('SET_DATA', {
							key: "uid",
							value: uid
						});
						this.$store.commit('SET_DATA', {
							key: "userInfo",
							value: userInfo
						});


						this.$store.dispatch('GET_USERINFO', token); // 去调vuex里的actions方法  请求服务器 成功以后存起来state   

						setTimeout(_ => {
							this.$router.go(-1); // 
						}, 1000)


						// 专门调了一个接口  

					} else {
						this.$toast.fail(res.msg)
					}
				}).catch(err => {
					console.log(err)

				})






			}

		}

	}
</script>

<style scoped="scoped">
	/*  自己新建一个class  >>>  */
	.nav-bar>>>.van-icon {
		color: #333;
		font-size: 150%;
	}
</style>
<style scoped lang="scss">
	.login-container {
		.send-btn {
			width: auto;
			height: 60px;
			padding: 1px 8px;
			background-color: #ededed;

			.van-button__text {
				font-size: 14px;
			}
		}

		.login-btn-wrap {
			padding: 26px 16px;

			.login-btn {
				background-color: #6db4fb;
				border: none;

				.van-button__text {
					font-size: 15px;
				}
			}
		}

		.link {
			color: #999;
			float: right;
			margin-top: 18px;
		}
	}
</style>
